<<template>
	<el-dialog :title="title" :visible.sync="show" width="85%" :close-on-click-modal='false'>
    <div class="art_test">
      <el-input v-model="dt_code" size="normal" placeholder="股票代码"></el-input>
      <el-input v-model="name" size="normal" placeholder="股票名称"></el-input>
      <el-input v-model="date" size="normal" placeholder="上榜日期"></el-input>
    </div>
    <div v-if="showPreview" class="pre-wrap">
      <div v-html="previewHTML"></div>
    </div>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="show = false">取 消</el-button>
      <el-button @click="preview">{{previewText}}</el-button>
      <el-button>确定</el-button>
	  </div>
	</el-dialog>
</template>
<script>
import api from "../../../api/api";
export default {
  props: {
    id: null
  },
  computed: {
    title() {
      return  "编译个股测试";
    }
  },
  data() {
    return {
      show: true,
      dt_code: '',
      date: '',
      previewText: "预览",
      showPreview: false,
      previewHTML: "",
      name: ""
    };
  },
  methods: {
    getDetail() {
      if (this.id) {
        api
          .getDataByID({
            tableName: "article",
            id: this.id
          })
          .then(res => {
            if (res.ret == 0) {
              let template = res.data.template;
              let data = JSON.parse(template);
              this.name = res.data.name;
              this.category = res.data.category;
              this.dateType = res.data.publish_date;
              if (res.data.publish_time) {
                let arrs = res.data.publish_time.split(":");
                this.time = new Date();
                this.time.setHours(arrs[0]);
                this.time.setMinutes(arrs[1]);
                this.time.setSeconds(arrs[2]);
              }
              this.titleParagraph = data.title && data.title[0];
              this.paragraphList = data.contents;
              // (this.name = res.data.name), (this.content = res.data.template);
            } else {
              this.$message({
                type: "error",
                message: "查询文章信息失败！"
              });
            }
          })
          .catch(e => {
            this.$message({
              type: "error",
              message: "查询文章信息失败！"
            });
          });
      }
    },
    preview() {
      if (this.showPreview) {
        this.showPreview = false;
        this.previewText = "预览";
        return;
      }
      let form = {};
      form.name = this.name;
      form.articleId = this.id;
      form.dt_code = this.dt_code;
      form.date = this.date;
      api
        .getSingleStockPreviewArticle({
          form: form
        })
        .then(res => {
          if (res.ret == 0) {
            console.log(res.data);
            this.previewHTML = res.data;
            this.showPreview = true;
            this.previewText = "关闭预览";
          } else {
            this.$message({
              type: "error",
              message: "预览文章失败"
            });
          }
        })
        .catch(e => {
          this.$message({
            type: "error",
            message: "预览文章失败"
          });
        });
    }
  },
  watch: {
    show(val) {
      if (!val) {
        this.$emit("closedialog");
      }
    }
  }
};
</script>
<style>
.cus_dialog .el-dialog {
  width: 75%;
}
.art_test .el-input{
  width: 200px;
  margin: 15px 0;
}
</style>


